﻿<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>登录页</title>

    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/font-awesome/css/font-awesome.css" rel="stylesheet">

    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <!-- Ladda style -->
    <link href="/css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">

</head>

<body class="gray-bg">

    <div class="middle-box text-center loginscreen animated fadeInDown">
        <div>
            <div>

                <h5 class="logo-name">E+</h5>

            </div>
            <h3>Welcome to EndTech</h3>

            <p>登录系统进行您的管理.</p>
            <div class="m-t" id="bind">
                <div class="form-group">
                    <input type="text" v-model="username" class="form-control" placeholder="Username" required="">
                </div>
                <div class="form-group">
                    <input type="password" v-model="pass" class="form-control" placeholder="Password" required="">
                </div>
                <button type="submit" class="btn btn-primary block full-width ladda-button" data-style="zoom-in" id="add" v-on:click="login()">登录</button>
            </div>
            <p class="m-t"> <small>EndingTech &copy; 2018 .</small> </p>
        </div>
    </div>
    <!-- Mainly scripts -->
    <script src="/js/jquery-2.1.1.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- Ladda -->
    <script src="/js/plugins/ladda/spin.min.js"></script>
    <script src="/js/plugins/ladda/ladda.min.js"></script>
    <script src="/js/plugins/ladda/ladda.jquery.min.js"></script>

    <script src="/js/alertEx.js"></script>
    <script src="/js/vue.min.js"></script>
    <script src="/js/HttpHelper.js"></script>


    <script type="text/javascript">
        var vue = new Vue({
            el: "#bind",
            data: {
                username: "",
                pass: ""
            },
            created: function () {
                this.username = localStorage.getItem("a");
                this.pass = localStorage.getItem("b");
            },
            methods: {
                login: function () {
                    var _this = this;
                    if (_this.username == "" || _this.pass == "" || _this.username == null || _this.pass == null) {
                        alert("账号或密码不能为空", "error");
                    }
                    var bt = $("#add").ladda();
                    bt.ladda("start");
                    post("/login/login", { name: _this.username, pass: _this.pass }, function (res) {
                        localStorage.setItem("a", _this.username);
                        localStorage.setItem("b", _this.pass);
                        alertDo("登陆成功", function () {
                            location.href = "/";
                        }, "success")

                    }, function () {
                        bt.ladda("stop");
                    })
                }
            }
        });
    </script>
</body>

</html>
